<template>
  <div id="middle">
<!-- 展示应用区域-->
<transition-group name="el-zoom-in-center">
    <AppFrame 
    v-for="v in allProcesses" 
    :key="v.process_id"
    :process="v"
    >
    <Setting slot="process_content"
    v-if="v.app_id=='setting'"
    ></Setting>
    <FolderManager
    slot="process_content"
    v-if="v.app_id=='folder-manager'"
    :process="v"
    ></FolderManager>
    <TextEditor 
    slot="process_content"
    v-if="v.app_id=='text-editor'"
    :process="v"
    ></TextEditor>
    <YMarkdownEditor 
    slot="process_content"
    v-if="v.app_id=='markdown-editor'"
    :process="v"
    ></YMarkdownEditor>
    <AppHeader slot="frame_header_inner"  :process="v">
    </AppHeader>
    <PdfView 
    :process="v"
    slot="process_content"
    v-if="v.app_id=='pdf-viewer'"
    ></PdfView>
    <NoticeApp 
    :process="v"
    slot="process_content"
    v-if="v.app_id=='notice-view'"
    ></NoticeApp>
    <YTerm
    :process="v"
    slot="process_content"
    v-if="v.app_id=='yterm'"
    >
      
    </YTerm>
    <Manage
    :process="v"
    slot="process_content"
    v-if="v.app_id=='manage'"
    >
    </Manage>
  </AppFrame>
</transition-group>
  </div>
</template>
<script>
import Manage from './apps/Manage.vue'
import AppHeader from './headers/AppHeader.vue'
import TextEditor from './apps/TextEditor.vue'
import YMarkdownEditor from './apps/YMarkdownEditor.vue'
import PdfView from './apps/PdfView.vue'
import {mapState,mapGetters} from 'vuex'
import Frame from './Frame.vue'
import Setting from './apps/Setting.vue'
import FolderManager from './apps/FolderManager.vue'
import YTerm from './apps/YTerm.vue'
import System from '../classes/System'
export default {
name:'Middle',
computed:{
    ...mapState('appAbout',['apps']),
    ...mapGetters('appAbout',['allProcesses'])
},
created(){

},
mounted(){
},
components:{
    AppFrame: Frame,
    Setting,
    FolderManager,
    TextEditor,
    AppHeader,
    YMarkdownEditor,
    PdfView,
    YTerm,
    Manage
}
}
</script>

<style scoped lang="less">
/deep/.vdr.active:before{
  outline:none
}
</style>